<script lang="ts" setup>
import { useBeforeDate } from 'co-utils-vue';
import { PropType } from 'vue';

import { IArticleItem } from '@/api/article/type';
import { ROUTER_PREFIX } from '@/constant';

defineProps({
  position: {
    type: Number,
    default: 0
  },
  row: {
    type: Object as PropType<IArticleItem>,
    default: () => {
    }
  }
});
</script>

<template>
  <div class="list-item cz-rounded-lg">
    <div class="list-item-card cz-p-1 cz-flex">
      <div
        v-if="position % 2 === 0"
        class="item-left-image"
      >
        <img
          :src="row.cover"
          alt="..."
          class="img-fluid max-md:cz-w-[80px] md:cz-max-w-[150px] cz-max-h-[150px]
          max-md:cz-h-[80px] cz-w-full cz-h-full"
          style="object-fit: cover"
        >
      </div>
      <div class="item-right-wrapper cz-flex-1 max-md:cz-h-[100px]">
        <div class="cz-p-2">
          <div class="article-content md:cz-mb-6 max-md: cz-mb-1">
            <div class="article-title cz-text-lg cz-ellipsis">
              <a
                :href="`${ROUTER_PREFIX}/article/${row.uid}`"
                class="cz-p-1"
                target="_blank"
              >{{ row.title }}</a>
            </div>
            <hr class="cz-divider">
            <div class="article-des cz-p-0.5 max-md:cz-text-xs cz-ellipsis-2 cz-text-[#a0a0a0]">
              {{ row.describe }}
            </div>
          </div>
          <div class="article-info cz-p-0.5 cz-flex cz-justify-start cz-text-xs cz-text-[#a0a0a0]">
            <div class="cz-pr-3">
              <i class="bi bi-person cz-text-xs" />
              <a
                class="cz-px-0.5"
                href="#"
              >{{ row.userInfo.username }}</a>
            </div>
            <div class="cz-px-3 md:cz-block cz-hidden">
              <i class="bi bi-book cz-text-xs" />
              <a
                class="cz-px-0.5"
                href="#"
              >{{ row.category.categoryName }}</a>
            </div>
            <div class="cz-px-3">
              <i class="bi bi-clock cz-text-xs" />
              <a
                class="cz-px-0.5"
                href="#"
              >{{ useBeforeDate(row.createDate) }}</a>
            </div>
            <div class="cz-px-3 md:cz-block cz-hidden">
              <i class="bi bi-chat-square-dots cz-text-xs" />
              <a
                class="cz-px-0.5"
                href="#"
              >{{ row.commentCount }}条评论</a>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="position % 2 === 1"
        class="item-left-image"
      >
        <img
          :src="row.cover"
          alt="..."
          class="img-fluid max-md:cz-w-[80px] md:cz-max-w-[150px] cz-max-h-[150px]
          max-md:cz-h-[80px] cz-w-full cz-h-full"
          style="object-fit: cover"
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list-item {
  box-shadow: 2px 2px 5px 1px var(--bs-border-color);
}
</style>
